import { Image, View } from '@tarojs/components';
import { observer } from 'mobx-react-lite';
import settingImg from '@/static/images/icon/setting.png';
import maintenanceImg from '@/static/images/icon/maintenance.png';
import leaseImg from '@/static/images/icon/lease.png';
import ComplaintImg from '@/static/images/icon/complaint.png';
import SwitchIdentity from '@/static/images/icon/switch-identity.png';
import './index.less';
import { navigateTo } from '@tarojs/taro';
import { useEffect, useMemo } from 'react';
import houseStore from '@/stores/HouseStore';
import userStore from '@/stores/UserStore';
import authStore from '@/stores/AuthStore';
import useIdentity from '@/hooks/useIdentity';
import Navbar from '@/components/Navbar';
import systemStore from '@/stores/SystemStore';
import useLandlord from '@/hooks/useLandlord';
import useLease from '@/hooks/useLease';
import useReport from '@/hooks/useReport';
import ImageComp from '@/components/Image';
import useSocket from '@/hooks/useSocket';
import Logout from '@/components/Logout';
import Domain from '@/components/Domain';

function LandlordUserComp() {
  const { user, releaseTenant } = userStore;
  const { isLogin } = authStore;
  const { switchIdentity } = useIdentity();
  const { leasePendingNoticeNum } = useLease();
  const { landlordReportPendingNoticeNum } = useReport();
  const { getTenantsByLandlordId } = useLandlord();
  const { getWebSocketMessage } = useSocket();

  // 功能区列表
  const domainList = useMemo(
    () => [
      {
        icon: <Image src={settingImg} className='icon' />,
        text: '个人设置',
        name: 'personalSettings',
        to: '/pages/selfInfo/index',
        notice: 0,
      },
      {
        icon: <Image src={maintenanceImg} className='icon' />,
        text: '房屋维修',
        name: 'houseRepair',
        to: '/pages/landlordReport/index',
        notice: landlordReportPendingNoticeNum,
      },
      {
        icon: <Image src={leaseImg} className='icon' />,
        text: '租赁申请',
        name: 'leaseApplication',
        to: '/pages/leaseNotice/index',
        notice: leasePendingNoticeNum,
      },
      {
        icon: <Image src={ComplaintImg} className='icon' />,
        text: '投诉建议',
        name: 'complaint',
        to: '/pages/complaintList/index',
        notice: 0,
      },
    ],
    [leasePendingNoticeNum, landlordReportPendingNoticeNum]
  );

  useEffect(() => {
    // 获取该房东已经租赁房屋的租客信息列表
    getTenantsByLandlordId();
    getWebSocketMessage();
  }, [user?.id]);

  return (
    <Navbar
      className='landlord-user-container'
      style={{ height: systemStore.notNavbarHaveTabbarHeight }}
    >
      <View
        onClick={() =>
          navigateTo({
            url: isLogin ? '/pages/selfInfo/index' : '/pages/login/index',
          })
        }
        className='header'
      >
        <Image
          src={SwitchIdentity}
          className='switch-identity-icon'
          style={{ top: systemStore.navbarHeight - 36 + 'px' }}
          onClick={switchIdentity}
        />
        <ImageComp src={user?.headImg} className='header-img' />
        <View className='header-name font-bold'>
          {isLogin ? user?.name : '请登录'}
        </View>
      </View>
      <View className='info'>
        <View className='have-house'>
          <View className='count font-bold'>{houseStore.houseNumberTotal}</View>
          <View className='title'>已有房屋</View>
        </View>
        <View
          className='have-tenant'
          onClick={() => {
            if (!releaseTenant?.length) {
              return;
            }
            navigateTo({ url: '/pages/existTenant/index' });
          }}
        >
          <View className='count font-bold'>{releaseTenant?.length}</View>
          <View className='title'>已有租客</View>
        </View>
      </View>
      <Domain domainList={domainList} isLogin={isLogin} />
      <Logout isLogin={isLogin} />
    </Navbar>
  );
}

export default observer(LandlordUserComp);
